<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>当前时间：<span class="content"></span></h1>
    <img src="./image1.jpg" class="img1" width="200">
    <div>
        <button class="next">next</button>
    </div>
    <script>
        let content = document.querySelector('.content');
        setInterval(() => {
            let time = new Date();
            // padStart补充位数，第一个参数是补充到几位数，第二个参数是用来填补的字符串
            let timeFinal = `
        ${time.getHours()}:${String(time.getMinutes()).padStart(2, '0')}:${time.getSeconds()}
        `;
            content.innerHTML = timeFinal;
        }, 1000)

        // ==========================
        let next = document.querySelector('.next');
        let img = document.querySelector('.img1');
        let num = 1;
        // 点击切换图片
        next.onclick = () => {
            num>3?num=1:num++
            console.log(num);
            img.src = `./image${num}.jpg`
        }
    </script>
</body>

</html>